<template>
  <h1>隐藏显示指令</h1>
  <!--v-if="布尔值" true元素显示 false元素消失
  false表示改元素下不会被渲染到DOM中，会直接跳过钙元素的渲染-->
  <p v-if="true">张三</p>
  <p v-if="false">李四</p>
  <hr>
  <!-- v-show 是修改元素的CSS display：none;让元素消失-->
  <p v-show="true">小红</p>
  <p v-show="false">小路</p>
  <hr>
<!-- v-else 会找到离自己最近的v-if进行取反 -->
  <h4 v-if="isShow">太阳</h4>
  <h4 v-else>月亮</h4>
</template>


<script setup>
 import {ref} from "vue";

 const isShow =ref(false);
</script>


<style scoped>

</style>